<template>
	<view class="flex-card">
		<view class="flex-item"  style="font-size: 24rpx;">
			<label>{{title1}}</label>
		</view>
		<view class="flex-item" style="font-size: 24rpx;">
			<label>{{title2}}</label>
		</view>
		<view class="flex-item">
			<text>{{value1.toFixed(precision)}}</text> 
		</view>
		<view class="flex-item">
			<text>{{value2.toFixed(precision)}}</text>
		</view>
		<view :class="['flex-item',  (direction >= 0 ? 'extra_up':'extra_down')]" style="font-size: 24rpx;">
			{{(direction >= 0 ? '+':'-')}}{{compareRaito}}
		</view>
	</view>

</template>

<script setup type="ts">
	import { ref, defineProps, watch, computed, reactive } from 'vue';
  
 const props = defineProps({
   value1: {
     type: Number,
     default: null,
   },   
   value2: {
     type: Number,
     default: null,
   },
   title1: {
     type: String,
     default: null,
   },
   title2: {
     type: String,
     default: null,
   },
   method: {   
	 type: String,
	 default: 'raito',
   },
   precision: {   
	 type: Number,
	 default: 2,
   },
 });
 
 const value1 = ref(null);
 const value2 = ref(null);
 
 const title1 = ref(null);
 const title2 = ref(null);
 
 
 watch(
     () => props.value1,
     (v) => {
       value1.value = v;
     },
     {
       immediate: true,
       deep: true,
     }
 )
 
 watch(
     () => props.value2,
     (v) => {
       value2.value = v;
     },
     {
       immediate: true,
       deep: true,
     }
 )
 
 watch(
     () => props.title1,
     (v) => {
       title1.value = v;
     },
     {
       immediate: true,
       deep: true,
     }
 )
 
 watch(
     () => props.title2,
     (v) => {
       title2.value = v;
     },
     {
       immediate: true,
       deep: true,
     }
 )
 
	 
 const compareRaito = computed(()=> {
	 if(props.method == 'raito'){
		 const raito = Math.abs(value2.value == 0?0: (value1.value - value2.value)/value2.value*100).toFixed(2)
		 return `${raito}%`;
	 }
	 else {
		 const raito = Math.abs(value1.value - value2.value).toFixed(2)
		 return raito;
	 }
 })
 
 const direction  = computed(()=> {
	 return value1.value - value2.value;
 })
  
  </script>

<style lang="scss" scoped>
	@import '../../../main.scss';
	@import '../../../static/font/enjoyicon5.0/iconfont.css';


	.flex-card {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;

		.extra_down {
			color: green;
		}

		.extra_up {
			color: red;
		}

		.flex-item {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			width: 50%;

			label {
				color: #888888;
				margin: 10rpx 0rpx;
				// font-size: 0.9rem;
				// margin: 0;
				// padding: 0;
				// line-height: 1rem;
			}

			text {
				font-size: 32rpx;
				// margin-left: 10rpx;
			}


		}

		.flex-item:first-child {
			label {
				// font-weight: bold;
				// font-size: 1.0rem;
			}

			text {
				// font-size: 38rpx;
				// font-weight: bold;
				// margin-left: 0;
			}
		}
	}
</style>